<template>

<div>
   <x-header :left-options="{showBack: false}" title="消息"></x-header>

  <scroller lock-x scrollbar-y use-pulldown :pulldown-config="{content:'下拉刷新',downContent:'下拉刷新',upContent:'释放刷新',loadingContent:'加载中'}" :height="heig" @on-pulldown-loading="load2" v-model="status1">

    <div class="mode-box">

      <swipeout-item :sensitivity="15"  transition-mode="reveal"  class="list-item"   v-for="item in list" :key="item.id">
        <div slot="right-menu">
          <swipeout-button text="不提示"  type="primary" :width="70"></swipeout-button>
          <swipeout-button text="删除" type="warn" :width="70"></swipeout-button>
          <swipeout-button text="忽略" type="default" :width="70"></swipeout-button>
        </div>

        <!-- <router-link to="/messagecont" class="a-block"> -->
          <div slot="content" class="mode-content vux-1px-t" @click="listpush(item.ariticleid)">
            <img class="listuserlogo floatleft" :src="item.imgurl">
            <span class="floatleft titconten">
              <div class="title" v-text="item.name"></div>
              <div class="conm" v-text="item.titles"></div>
            </span>

          </div>
        <!-- </router-link> -->
      </swipeout-item>

    </div>

  </scroller>
</div>
</template>

<script>
import { Scroller,Swipeout, SwipeoutItem, SwipeoutButton,XHeader  } from 'vux'
export default {
  components: {
    Scroller,
    Swipeout, SwipeoutItem, SwipeoutButton,XHeader
  },
  methods: {

    load2 () {
      setTimeout(() => {
        this.status1.pulldownStatus = 'default'
      }, 2000)
    },
    listpush(ids){
      // router.push({path: '/messagecont', query:{listid: ids}});
      this.$router.push({path: '/messagecont', query:{listid: ids}});
      // alert(ids)
    }

  },
    mounted () {
      this.heig=(document.documentElement.clientHeight-50)+'px';
    this.$nextTick(function() {
     setTimeout(()=>{this.$store.state.isload=false},100)
      // alert("f")
    // window.
    })
  },
  data () {
    return {
      // n1: 10,
      heig:"",
      status1: {
        pulldownStatus: 'default'
      },
      list:[{
        imgurl:"http://img4.imgtn.bdimg.com/it/u=3997485673,3526401265&fm=11&gp=0.jpg",
        name:"张展示",
        titles:"这篇文章是个经典系列这篇文章是个经典系列这篇文章是个经典系列",
        ariticleid:"1"
      },{
        imgurl:"http://img4.imgtn.bdimg.com/it/u=3997485673,3526401265&fm=11&gp=0.jpg",
        name:"张发",
        titles:"这篇文章是个经典系列这篇文章是个经典系列这篇文章是个经典系列",
        ariticleid:"3"
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.box1 {
  height: 100px;
  position: relative;
  width: 1490px;
}
.box1-item {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  display:inline-block;
  margin-left: 15px;
  float: left;
  text-align: center;
  line-height: 100px;
}
.box1-item:first-child {
  margin-left: 0;
}
.box2-wrap {
  height: 300px;
  overflow: hidden;
}
.rotate {
  transform: rotate(-180deg);
}
.pulldown-arrow {
  display: inline-block;
  transition: all linear 0.2s;
  color: #666;
  font-size: 25px;
}
.mode-box {
  // .vux-swipeout-button-box {
  //   bottom: 1px!important;
  // }
  .mode-content  {
    padding: 10px  15px;
    overflow:hidden;
    width: 100%;

    img {
      max-width: 50px;
      min-width: 45px;
      max-height:50px;
      min-height:45px;
      // border-radius: 100%;
      margin-right: 1%;
      width: 5%;
      // display: inline-block;
    }
    .titconten{
      padding-left: 2%;
      overflow: hidden;
      text-overflow:ellipsis;
      width: 75%;
      white-space: nowrap;/*不换行*/
      .title {
        font-size:14px;
        color: #232323;
        width: 100%;
        text-overflow:ellipsis;
        overflow: hidden;
      }
      .conm{
        font-size: 14px;
        color: #B3B3B3;
        width: 100%;
        text-overflow:ellipsis;
        overflow: hidden;
      }
    }
  }
}
.list-item  {
  overflow:hidden;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
  // margin-bottom: 1px;
}
.a-block {
  display: block;
}
</style>
